<template>
  <el-dialog
    :title="title"
    center
    :visible.sync="openState"
    width="1024px"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <el-form ref="formData" :model="formData" :rules="rules" label-width="110px">
      <!-- 交易基础信息 -->
      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>交易基础信息</span>
        </div>

        <el-row>
          <el-col :span="12">
            <el-form-item label="交易流水号" prop="transNum">
              <el-input v-model="formData.transNum" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="工作日期" prop="workDate">
              <el-date-picker
                v-model="formData.workDate"
                type="date"
                value-format="yyyyMMdd"
                placeholder=""
                disabled
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="CPG日期" prop="CPGDate">
              <el-date-picker
                v-model="formData.CPGDate"
                type="date"
                value-format="yyyyMMdd"
                placeholder=""
                disabled
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="业务优先级" prop="bizPriority">
              <el-select v-model="formData.bizPriority" disabled>
                <el-option label="NORM-普通" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交易渠道" prop="transChannel">
              <el-select v-model="formData.transChannel" disabled>
                <el-option label="1-CPG柜面" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="记账标志" prop="accountingMark">
              <el-select v-model="formData.accountingMark" disabled>
                <el-option label="0-不记账" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="账户类型" prop="accountType">
              <el-select v-model="formData.accountType" disabled>
                <el-option label="I-对私" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="业务类型" prop="businessType">
              <el-select v-model="formData.businessType" disabled>
                <el-option label="A104-国库资金贷记划拨账" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务种类" prop="businessKind">
              <el-select v-model="formData.businessKind" disabled>
                <el-option label="02201-中央级预算收入" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 付款人信息 -->
      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>付款人信息</span>
        </div>

        <el-row>
          <el-col :span="12">
            <el-form-item label="借方账号" prop="debitAccount">
              <el-input v-model="formData.debitAccount" placeholder="借方账号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="借方户名" prop="debitName">
              <el-input v-model="formData.debitName" disabled placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="付款人账号" prop="payerAccount">
              <el-input v-model="formData.payerAccount" placeholder="付款人账号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款人名称" prop="payerName">
              <el-input v-model="formData.payerName" disabled placeholder="付款人名称" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="付款人地址" prop="payerAddress">
              <el-input v-model="formData.payerAddress" disabled placeholder="付款人地址" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="付款行行号" prop="payerBankNum">
              <el-input v-model="formData.payerBankNum" disabled placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款行行名" prop="payerBankName">
              <el-input v-model="formData.payerBankName" disabled placeholder="付款行行名" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="付款人开户行号" prop="payerOpenBankNum">
              <el-input v-model="formData.payerOpenBankNum" disabled placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款人开户行行名" prop="payerOpenBankName">
              <el-input v-model="formData.payerOpenBankName" disabled placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 收款人信息 -->
      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>收款人信息</span>
        </div>

        <el-row>
          <el-col :span="12">
            <el-form-item label="收款人账号" prop="payeeAccount">
              <el-input v-model="formData.payeeAccount" placeholder="请输入收款人账号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款人名称" prop="payeeName">
              <el-input v-model="formData.payeeName" disabled placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="收款人地址" prop="payeeAddress">
              <el-input v-model="formData.payeeAddress" disabled placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="收款行行号" prop="payeeBankNum">
              <el-input v-model="formData.payeeBankNum" placeholder="请输入收款行行号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款行行名" prop="payeeBankName">
              <el-input v-model="formData.payeeBankName" disabled placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="收款人开户行号" prop="payeeOpenBankNum">
              <el-input v-model="formData.payeeOpenBankNum" disabled placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款人开户行行名" prop="payeeOpenBankName">
              <el-input v-model="formData.payeeOpenBankName" disabled placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 其他交易信息 -->
      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>其他交易信息</span>
        </div>

        <el-row>
          <el-col :span="12">
            <el-form-item label="中介机构1" prop="interAgency1">
              <el-input v-model="formData.interAgency1" placeholder="中介机构1" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="中介机构1名称" prop="interAgencyName1">
              <el-input v-model="formData.interAgencyName1" placeholder="中介机构1名称" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="中介机构2" prop="interAgency2">
              <el-input v-model="formData.interAgency2" placeholder="中介机构2" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="中介机构2名称" prop="interAgencyName2">
              <el-input v-model="formData.interAgencyName2" placeholder="中介机构2名称" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="交易货币" prop="transCur">
              <el-input v-model="formData.transCur" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="金额" prop="transAmount">
              <el-input v-model="formData.transAmount" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="手续费金额" prop="HandlingAmount">
              <el-input v-model="formData.HandlingAmount" placeholder=""  />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="24">
            <el-form-item label="附言" prop="postscript">
              <el-input type="textarea" v-model="formData.postscript" placeholder="附言" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 国库资金划拨附加域 -->
      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>国库资金划拨附加域</span>
        </div>

        <el-row>
          <el-col :span="12">
            <el-form-item label="信息流水号" prop="infoSerialNum">
              <el-input v-model="formData.infoSerialNum" placeholder="信息流水号" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="上报国库代码" prop="ReportTreasuryCode">
              <el-input v-model="formData.ReportTreasuryCode" placeholder="信息流水号" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接收国库代码" prop="AccTreasuryCode">
              <el-input v-model="formData.AccTreasuryCode" placeholder="接收国库代码" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="报表日期" prop="statementDate">
              <el-date-picker
                v-model="formData.statementDate"
                type="date"
                value-format="yyyyMMdd"
                placeholder=""
                disabled
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报表序号" prop="statementNum">
              <el-input v-model="formData.statementNum" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="预算级次" prop="budgetHierarchy">
              <el-select v-model="formData.budgetHierarchy" disabled>
                <el-option label="BL00-中央级预算" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="调整期标志" prop="adjustMark">
              <el-select v-model="formData.adjustMark" disabled>
                <el-option label="ID01-调整期" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="预算种类" prop="budgetKind">
              <el-select v-model="formData.budgetKind" disabled>
                <el-option label="BT01-预算外" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="明细汇总金额币种" prop="detailCollectAmountCur">
              <el-input v-model="formData.detailCollectAmountCur" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="明细汇总金额" prop="detailCollectAmount">
              <el-input v-model="formData.detailCollectAmount" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="明细条数" prop="detailNum">
              <el-input v-model="formData.detailNum" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-row>
        <el-col :span="3" :offset="22" class="menu-tree">
          <svg-icon icon-class="down_circle" className="menu-tool-btn" />
          <svg-icon icon-class="search-circle" className="menu-tool-btn" />
          <svg-icon icon-class="search-circle_1" className="menu-tool-btn" />
          <svg-icon icon-class="menu-circle" className="menu-tool-btn" />
        </el-col>
      </el-row>
      <el-table :data="tableData" style="width: 100%; margin-top: 0px" height="200px">
        <el-table-column
          prop="organCode"
          label="征收机关大类代码"
          align="center"
          sortable
          width="250"
        ></el-table-column>
        <el-table-column prop="subjectCode" label="预算科目代码" align="center" sortable width="250"></el-table-column>
        <el-table-column prop="accrual" label="发生额" align="center" sortable width="250"></el-table-column>
        <el-table-column fixed="right" class="table-header-cell" align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click.native.prevent="detail(scope.$index, tableData)" type="text" size="small">明细</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-row>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="10"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="20"
          ></el-pagination>
        </div>
      </el-row>

      <!-- 处理信息 -->
      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>处理信息</span>
        </div>

        <el-row>
          <el-col :span="12">
            <el-form-item label="录入操作员" prop="entryOperator">
              <el-input v-model="formData.entryOperator" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="录入时间" prop="entryTime">
              <el-input v-model="formData.entryTime" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="复核附言" prop="checkMemo">
              <el-input type="textarea" v-model="formData.checkMemo" placeholder="复核附言" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 附加数据域 -->
      <el-card v-if="backVisible" class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>附加数据域</span>
        </div>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="原报文标识号" prop="identiNo">
              <el-input v-model="formData.identiNo" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原报文类型代码" prop="identiTypeCode">
              <el-input v-model="formData.identiTypeCode" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="原发起机构" prop="initiator">
              <el-input v-model="formData.initiator" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原发起机构名称" prop="initiatorName">
              <el-input v-model="formData.initiatorName" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-form-item label="退汇原因" prop="reexchReason">
            <el-input type="textarea" v-model="formData.reexchReason" disabled placeholder="退汇原因" />
          </el-form-item>
        </el-row>
      </el-card>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="check">复核</el-button>
      <el-button type="danger" @click="reject">拒绝</el-button>
      <el-button @click="close">关闭</el-button>
    </span>
    <nation-detail-dialog ref="nationDetailDialog"></nation-detail-dialog>
  </el-dialog>
</template>

<script>
import nationDetailDialog from "./nationDetailDialog";
export default {
  name: "checkDetailDialog",
  components: {
    nationDetailDialog,
  },
  data() {
    return {
      currentPage4: 1, // 分页
      title: "",
      openState: false, // 是否显示弹出层
      checked: true,
      backVisible: false, // 业务类型选择退汇时显示
      fromFlag: "",
      tableData: [
        {
          organCode: "1111111111", // 征收机关大类代码
          subjectCode: "123123", // 预算科目代码
          accrual: "66666", // 发生额
        },
      ],

      formData: {
        // 交易基础信息
        transNum: "BEPS2023060800483221", // 交易流水号
        workDate: "2023-10-24", // 工作日期
        CPGDate: "2023-06-02", // CPG日期
        bizPriority: "1", // 业务优先级
        transChannel: "1", // 交易渠道
        accountingMark: "1", // 记账标志
        accountType: "1", // 账户类型
        businessType: "1", // 业务类型
        businessKind: "1", // 业务种类

        // 付款人和借方信息
        debitAccount: "", // 借方账号
        debitName: "王五", //借方户名
        payerAccount: "", // 付款人账号
        payerName: "张三", // 付款人名称
        payerAddress: "上海市普陀区", // 付款人地址
        payerBankNum: "313290040014", // 付款行行号
        payerBankName: "中国建设银行", // 付款行行名
        payerOpenBankNum: "313290040014", // 付款人开户行号
        payerOpenBankName: "中国建设银行", // 付款人开户行行名

        // 收款人信息
        payeeAccount: "", // 收款人账号
        payeeName: "李四", // 收款人名称
        payeeAddress: "上海市青浦区", // 收款人地址
        payeeBankNum: "", // 收款行行号
        payeeBankName: "中国人民银行科尔沁右翼中旗支行", // 收款行行名
        payeeOpenBankNum: "001198315005", // 收款人开户行号
        payeeOpenBankName: "中国人民银行科尔沁右翼中旗支行", // 收款人开户行行名

        // 其他交易信息
        IntermeAgency1: "", // 中介机构1
        IntermeAgencyName1: "", // 中介机构名称1
        IntermeAgency2: "", // 中介机构2
        IntermeAgencyName2: "", // 中介机构名称2
        transCur: "CNY", // 交易货币
        transAmount: "", // 交易金额
        HandlingAmount: "", // 手续费金额
        postscript: "", // 附言

        // 国库资金划拨附加域
        infoSerialNum: "BEPS2023060800483221", //   信息流水号
        ReportTreasuryCode: "DCR", //上报国库代码
        AccTreasuryCode: "RFT", //接收国库代码
        statementDate: "2023-06-08", //报表日期
        statementNum: "3453", // 报表序号
        budgetHierarchy: "1", //预算级次
        adjustMark: "1", //调整期标志
        budgetKind: "1", // 预算种类
        detailCollectAmountCur: "CNY", //明细汇总金额币种
        detailCollectAmount: "66,666", //明细汇总金额
        detailNum: "1", // 明细条数

        // 处理信息
        entryOperator: "cpg002", //   录入操作员
        entryTime: "2023-06-08 15:01:31", // 录入时间
        checkMemo: "", //复核附言

        // 附加数据域
        identiNo: "132413546546234235", //   原报文标识号
        initiator: "234135643523453245756846", //原发起机构
        initiatorName: "321524362436423", //原发起机构名
        identiTypeCode: "中国工商银行", //原报文类型代码
        reexchReason: "", // 退汇原因
      },

      rules: {
        debitAccount: [{ required: true, message: "请输入借方账号", trigger: "blur" }],
        payerAccount: [{ required: true, message: "请输入付款人账号", trigger: "blur" }],
        payeeAccount: [{ required: true, message: "请输入收款人账号", trigger: "blur" }],
        payeeBankNum: [{ required: true, message: "请输入收款行行号", trigger: "blur" }],
        transAmount: [{ required: true, message: "请输入金额", trigger: "blur" }],
      },
    };
  },

  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    show(fromFlag = "") {
      console.log(fromFlag, "show");
      this.fromFlag = fromFlag;
      this.title = "大小额往账业务复核明细";
      if(fromFlag == "退汇"){
        this.backVisible = true;
      } else{
        this.backVisible = false;
      }
      this.openState = true;
    },

    // 关闭
    close() {
      this.openState = false;
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    // 复核
    check() {
      console.log("复核");
    },

    // 拒绝
    reject() {
      console.log("拒绝");
    },

    // 详情
    detail() {
      console.log(this.fromFlag, "详情");
      console.log("this.$refs.nationDetailDialog", this.$refs.nationDetailDialog);
      this.$emit("choose", this.fromFlag);
      this.$refs.nationDetailDialog.show();
    },
  },
};
</script>

<style scoped>
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #000000 !important;
}
.menu-tool-btn {
  width: 24px;
  height: 24px;
}

.menu-tree {
  height: 5%;
  margin-top: -5px;
  margin-left: 90%;
  font-size: 28px;
}
.block {
  float: right;
}
</style>
